import {Card, Pagination, Table, Tag} from "antd";
import styles from "../styles.less";
import {useCallback, useEffect} from "react";
import {connect} from 'umi';
import {nowrapColumns} from '@/utils/utils';

const ChargeTable = (props) => {

  const {tablePayload, setTablePayload} = props.data;
  const {dispatch, dataTable, loading} = props;

  /* 获取列表 */
  const fetchList = useCallback((payload) => {
    dispatch({
      type: 'PIndexChargeTable/fetchList',
      payload: payload,
    });
  }, [dispatch]);

  /* 查询监听 */
  useEffect(() => {
    fetchList(tablePayload);
  }, [fetchList, tablePayload]);

  function onSelect(e, paid) {
    e.preventDefault();
    setTablePayload({pageNum: 1, pageSize: 15, param: {paid}})
    return false;
  }

  const columns = [
    {
      title: '序号',
      width: 70,
      align: 'center',
      fixed: 'left',
      render: ({}, {}, index) => (
        <span>
          {(tablePayload.pageNum - 1) * tablePayload.pageSize + index + 1}
        </span>
      ),
    },
    {
      title: '支付渠道',
      dataIndex: 'payChannelName',
      align: 'center',
      ellipsis: true,
      fixed: 'left',
      render: (_, record) => {
        return record.payChannelName ? (<span>{record.payChannelName}</span>) : '-';
      }
    },
    {
      title: '交易金额',
      dataIndex: 'amountStr',
      align: 'center',
      fixed: 'left',
      ellipsis: true,
      render: (_, record) => {
        return record.amountStr ? (<span style={{color: 'red'}}>{record.amountStr}</span>) : '-';
      }
    },
    {
      title: '付款状态',
      dataIndex: 'paid',
      align: 'center',
      fixed: 'left',
      render: (_, record) => {
        switch (record.paid) {
          case 0:
            return (<Tag color="#f50">未付款</Tag>);
          case 1:
            return (<Tag color="#87d068">已付款</Tag>);
        }
      }
    },
    {
      title: '商品描述',
      dataIndex: 'body',
      align: 'center',
      ellipsis: true,
      render: (_, record) => {
        return record.body ? (<span>{record.body}</span>) : '-';
      }
    },
    {
      title: '支付单号',
      dataIndex: 'code',
      align: 'center',
      ellipsis: true,
      render: (_, record) => {
        return record.code ? (<span>{record.code}</span>) : '-';
      }
    },
    {
      title: '付款时间',
      dataIndex: 'timePaid',
      align: 'center',
      ellipsis: true,
      render: (_, record) => {
        return record.timePaid ? (<span>{record.timePaid}</span>) : '-';
      }
    },
  ];

  return (
    <Card
      title={"交易动态"} bordered={false} bodyStyle={{padding: 0}}
      extra={<div className={styles.cardExtraWrap}>
        <div className={styles.cardExtra}>
          <a className={tablePayload.param.paid === -1 ? styles.currentDate : ''}
             onClick={e => onSelect(e, -1)}>全部</a>
          <a className={tablePayload.param.paid === 1 ? styles.currentDate : ''}
             onClick={e => onSelect(e, 1)}>已支付</a>
          <a className={tablePayload.param.paid === 0 ? styles.currentDate : ''}
             onClick={e => onSelect(e, 0)}>未支付</a>
        </div>
      </div>}>
      <div className={styles.myTabContainer}>
        <div className={styles.myDataTable}>
          <Table
            loading={loading} className={styles.myTable} bordered={false} size={'middle'}
            columns={nowrapColumns(columns, dataTable.list)}
            dataSource={dataTable.list} rowKey={'id'}
            pagination={false} scroll={{y: '100%'}}
          />
        </div>
        <Pagination
          pageSize={tablePayload.pageSize} current={tablePayload.pageNum} total={dataTable.total}
          className={styles.myPagination} size={'default'} hideOnSinglePage={false}
          pageSizeOptions={[15, 30, 60]}
          showSizeChanger showQuickJumper={true}
          onChange={(page, pageSize) => {
            setTablePayload({...tablePayload, pageNum: page, pageSize: pageSize});
          }}
          showTotal={(total) => {
            return `共 ${total} 条记录`;
          }}
        />
      </div>
    </Card>
  );
}

export default connect(({loading, PIndexChargeTable}) => {
  return {
    loading: loading.effects['PIndexChargeTable/fetchList'],
    dataTable: PIndexChargeTable.dataTable,
  };
})(ChargeTable);
